<template>
  <div>
    <div id="zst">hello world</div>
  </div>
</template>

<script>
import echarts from 'echarts'
import data from '../../static/data/data.json'

export default {
  data() {
    return {
      chart: null
    };
  },
  methods: {
    drawPie(id) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        toolbox: {
           feature: {
              saveAsImage: {},
              dataView: {}
            },
            right: 15,
            top: 10
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      });
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie('zst');
      var that = this;
      var resizeTimer = null;
      window.onresize = function() {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          that.drawPie('zst');
        }, 100);
      }
    });
  }
}
</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
#zst {
  position: relative;
  left: 50%;
  width: 90%;
  height: 600px;
  margin-left: -45%;
  box-shadow: 0 0 10px #a2b4ba;
  border-radius: 10px;
}

@media screen and (max-width: 530px) {
  #zst {
    height: 500px;
  }
}
</style>
